<template>
  <div class="layui-container">
            <div class="layui-row layui-col-space15">
                <!-- 左边主体部分 -->
                <div class="layui-col-md8">
                    <!--轮播图 -->
                    <div class="layui-carousel" id="test3" lay-filter="test4" style="margin-bottom: 15px;">
                        <el-carousel :interval="5000" arrow="always">
                          <el-carousel-item v-for="item in 4" :key="item">
                            <h3>{{ item }}</h3>
                          </el-carousel-item>
                        </el-carousel>
                    </div>
                 
                    <div v-if="topdata" class="fly-panel">
                        <div class="fly-panel-title fly-filter">
                            <a>置顶</a>
                            <a href="#signin" class="layui-hide-sm layui-show-xs-block fly-right" id="LAY_goSignin" style="color: #FF5722;">去签到</a>
                        </div>
                        <ul class="fly-list">
                            <li v-for="(item) in topdata" :key="item.id">
                                <a href="{:url('user/index/home',array('id'=>item.author))}" class="fly-avatar">
                                    <img :src="item.user_info.head_img" :alt="item.user_info.author_name">
                                </a>
                                <h2>
                                    <a class="layui-badge">{{item.category_name}}</a>
                                    <a :href="'/post/'+item.id">{{item.title}}</a>
                                </h2>
                                <div class="fly-list-info">
                                    <a href="{:url('user/index/home',array('id'=>$v.author))}" link>
                                        <cite>{{item.user_info.author_name}}</cite>
                                        <i v-if="item.user_info.is_admin === '1'" class="iconfont icon-renzheng" title="认证信息：管理员"></i>
                                        <i v-if="item.user_info.is_vip === '1'" class="layui-badge fly-badge-vip">VIP{{item.user_info.is_vip}}</i>
                                    </a>
                                    <span>{{item.create_date}}</span>

                                    <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> {{item.reward}}</span>
                                    <span  v-if="item.solved === '1'" class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
                                    <span class="fly-list-nums"><i class="iconfont icon-pinglun1" title="回答"></i> {{item.comment_count}}</span>
                                </div>
                                <div class="fly-list-badge">
                                       <span class="layui-badge layui-bg-black">置顶</span>
                                       <span class="layui-badge layui-bg-red">精帖</span>
                                      
                                </div>
                            </li>
                        </ul>
                    </div> 

                    <div class="fly-panel" style="margin-bottom: 0;">

                        <div class="fly-panel-title fly-filter">
                            <a href="/post/list/all?page=1" class="layui-this">综合</a>
                            <span class="fly-mid"></span>
                            <a href="/post/list/all?page=1&status=1">未结</a>
                            <span class="fly-mid"></span>
                            <a href="/post/list/all?page=1&status=2">已结</a>
                            <span class="fly-mid"></span>
                            <a href="/post/list/all?page=1&status=3">精华</a>
                            <span class="fly-filter-right layui-hide-xs"><a href="" class="layui-this">按最新</a><span class="fly-mid"></span><a href="">按热议</a></span>
                        </div>

                        <ul class="fly-list">
                            <li v-for="(item) in postlist.rows" :key="item.ID">
                                <a href="{:url('user/index/home',array('id'=>$v.author))}" class="fly-avatar">
                                    <img :src="item.user_info.head_img" :alt="item.user_info.author_name">
                                </a>
                                <h2>
                                    <a class="layui-badge">{{item.category_name}}</a>
                                    <a :href="'/post/'+item.id">{{item.title}}</a>
                                </h2>
                                <div class="fly-list-info">
                                    <a href="{:url('user/index/home',array('id'=>$v.author))}" link>
                                        <cite>{{item.user_info.author_name}}</cite>
                                        <i v-if="item.user_info.is_admin === '1'" class="iconfont icon-renzheng" title="认证信息：管理员"></i>
                                        <i v-if="item.user_info.is_vip === '1'" class="layui-badge fly-badge-vip">VIP{{item.user_info.is_vip}}</i>
                                    </a>
                                    <span>{{item.create_date}}</span>

                                    <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> {{item.reward}}</span>
                                    <span  v-if="item.solved === '1'" class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
                                    <span class="fly-list-nums"><i class="iconfont icon-pinglun1" title="回答"></i> {{item.comment_count}}</span>
                                </div>
                                <div class="fly-list-badge">
                                    <span  v-if="item.is_wonderful === '1'" class="layui-badge layui-bg-red">精帖</span>
                                </div>
                            </li>  
                        </ul>
                        <div v-if="postlist.total > postlist.perPage" style="text-align: center">
                            <div class="laypage-main">
                                <a href="/post/list/all?page=2" class="laypage-next">更多求解</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 左边主体部分 -->
                <Right />
            </div>
        </div>
</template>

<script>
import Right from '../components/Right.vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { mapMutations } from "vuex";
import Cookies from 'js-cookie'
export default {
   components: {
    Right,
  },
  data() {
    return {
      topdata: [], //置顶帖子
      postlist: [], // 帖子列表
    };
  },
  mounted(){
    console.log("this.route:",this.$route)
    this.getPostData() //获取首页帖子
    // console.log("cookie token:",Cookies.get('app.token'))
    // if(Cookies.get('app.token') != ""){
    //   console.log("有token")
    //     this.getUserInfo() //获取用户信息
    // }else{
    //    console.log("没有token")
    //    this.$store.commit('setUser',null)
    // }
    if(this.$route.query.code != null){
      console.log("调用获取token接口")
      this.getSsoToken(this.$route.query.code)
    }
  },
  inject:['store'],
  //初始化函数
  setup(){
    console.log("setup start")
    myFn()
    function myFn(){
      console.log("执行初始化方法");
    }
    return {
      myFn
    }
  },
  methods: {
    ...mapMutations(["setUser"]),
    //获取首页帖子数据
    getPostData() {
      const params = {
        params: {
        }
      }
      request.get('/micro-bbs/v1/home/postData', params).then((res) => {
        const { code, data } = res
        // this.notifySucceed(message);
        if (code === 200) {
          this.topdata = data.topdata
          this.postlist = data.data
        }
      })
    },
    //获取用户信息-老oauth服务
    getUserInfo2() {
      const params = {
        params: {
          user_id:1
        }
      }
      request.get('/micro-oauth/oauth/getUser', params).then((res) => {
        const { code, data } = res
        // this.notifySucceed(message);
        if (code === 200) {
          // this.notifySucceed("本次验证码为："+data);
           ElMessage({
              message: 'Congrats, this is a success message.'+data,
              type: 'success',
              offset: 200
           })
        }
      })
    },
    //获取sso的access_token信息
    getSsoToken(code) {
      const params = {
        params: {
          code: code
        }
      }
      request.get('/micro-bbs/v1/sso/token', params).then((res) => {
        const { code, } = res
        // this.notifySucceed(message);
        if (code === 200) {
          // this.notifySucceed("本次验证码为："+data);
          // let token = JSON.stringify(data.access_token);
          // localStorage.setItem("token", token);
          this.getLoginInfo()
          this.$router.push("/")
        }
      })
    },
    //获取登录信息
    getLoginInfo() {
      const params = {
        params: {
        }
      }
      request.get('/micro-bbs/v1/user/loginInfo', params).then((res) => {
        const { code, data } = res
        if (code === 200) {
           this.userinfo = data.userinfo
           this.setUser(data.userinfo)
           Cookies.set('app.token', data.tokenMap.access_token, 'localhost')
          //  Cookies.set('app.user', JSON.stringify(data.userinfo), 'localhost')
          ElMessage({
            message: '欢迎回来！'+data.userinfo.nickname,
            type: 'success',
            offset: 200
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #5FB878;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #5FB878;
}
</style>